<template>
  <div class="container flag">
    <div class="banner_box">
      <div class="banner_Carousel">
        <div class="swiper-container" id="swiperIndex">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
              <img :src="item.pic" alt="" />
            </div>
          </div>
          <!-- //换页器 -->
          <div class="swiper-pagination"></div>
          <!-- //前进后退 -->
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
      <div class="banner_two">
        <img src="./images/banner2.jpg" />
      </div>
      <div class="banner_login">
        <div class="img-box"><img src="./images/headPortrait-2.jpg" /></div>
        <div class="sayHello">Hi！你好</div>
        <a class="login-button active-login-button" href="#">登录</a>
        <a class="login-button" href="#">注册</a>
      </div>
      <div class="banner_four">
        <img src="./images/banner4.png" />
      </div>
      <div class="banner_five">
        <img src="./images/banner5.jpg" />
      </div>
      <div class="banner_six">
        <img src="./images/banner6.jpg" />
      </div>
      <div class="banner_qrCode">
        <div class="qrCode-box"><img src="./images/qrCode.png" /></div>
        <div class="meituan-app">美团App手机版</div>
        <div class="describe"><span>1元起</span>吃喝玩乐</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "banner",
};
</script>

<script setup>
import { reactive, onMounted } from "vue";
import Swiper from "swiper"; // 引入库
import "swiper/css/swiper.css"; // 引入样式文件，注意5和6版本的样式文件不一致
onMounted(() => {
  var mySwiper = new Swiper("#swiperIndex", {
    loop: true, // 循环模式选项
    autoplay: true, //自动滚动
    effect: "fade", //渐变切换
    allowTouchMove: false,
    //配置分页器内容
    pagination: {
      el: ".swiper-pagination", //换页器与哪个标签关联
      clickable: true, //分页器是否可以点击
    },
    autoplay: {
      // pauseOnMouseEnter: true, //鼠标移入 轮播暂停
      disableOnInteraction: false,
      // disableOnInteraction
      delay: 1000, //1秒切换一次
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});

let imgs = reactive([
  {
    pic: "../../../../../src/views/home/components/banner/images/banner-1.jpg",
  },
  {
    pic: "../../../../../src/views/home/components/banner/images/banner-2.jpg",
  },
  {
    pic: "../../../../../src/views/home/components/banner/images/banner-3.jpg",
  },
  {
    pic: "../../../../../src/views/home/components/banner/images/banner-4.jpg",
  },
  {
    pic: "../../../../../src/views/home/components/banner/images/banner-5.png",
  },
]);
</script>

<style scoped>
.flag {
  position: relative;
  height: 417px;
  top: 28px;
}
.banner_box {
  width: 950px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-end;
}
.banner_Carousel {
  margin-top: 10px;
  width: 550px;
  height: 240px;
  background-color: #fff;
}
.banner_two {
  margin-top: 10px;
  width: 150px;
  height: 240px;
  background-color: #fff;
}
.banner_two img {
  width: 150px;
  height: 240px;
}
.banner_login {
  margin-top: 10px;
  padding-top: 30px;
  width: 230px;
  height: 240px;
  background-color: #fff;
  text-align: center;
  box-sizing: border-box;
}
.banner_login .img-box {
  /* margin-bottom: 4px; */
  display: block;
  margin: 0 auto;
  width: 59px;
  height: 59px;
  border-radius: 50%;
  overflow: hidden;
}
.banner_login .img-box img {
  width: 100%;
}
.banner_login .sayHello {
  margin-top: 4px;
  text-align: center;
  font-size: 16px;
  color: #222;
  font-weight: 500;
}
.banner_login .login-button {
  display: block;
  width: 118px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  margin: 10px 54px 15px;
  border: 1px solid #e5e5e5;
  border-radius: 40px;
  font-size: 14px;
  color: #333;
}
.active-login-button {
  background-color: #ffcb00;
}

.banner_four {
  margin-top: 10px;
  width: 270px;
  height: 165px;
  background-color: #fff;
}
.banner_four img {
  width: 270px;
  height: 165px;
}
.banner_five {
  margin-top: 10px;
  width: 270px;
  height: 165px;
  background-color: #fff;
}
.banner_five img {
  width: 270px;
  height: 165px;
}
.banner_six {
  margin-top: 10px;
  width: 150px;
  height: 165px;
  background-color: #fff;
}
.banner_six img {
  width: 150px;
  height: 165px;
}
.banner_qrCode {
  margin-top: 10px;
  width: 228px;
  height: 165px;
  background-color: #fff;
}
.qrCode-box {
  height: 99px;
  margin-top: 10px;
  text-align: center;
}
.banner_qrCode .meituan-app {
  text-align: center;
  font-size: 16px;
  color: #222222;
  font-weight: 500;
}
.banner_qrCode .describe {
  text-align: center;
}
.banner_qrCode .describe span {
  color: #ec5330;
  margin-right: 5px;
}
.qrCode-box img {
  width: 95px;
  height: 95px;
}

/* 轮播图 */
#swiperIndex.swiper-container {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}
.swiper-pagination-bullet-active {
  background-color: orangered;
}
</style>
